<template>
  <div>
    <article class="cart">
      <nav class="cart_title">
        <div style="margin-left:5px;" @click="closeCarts">
          <img src="../assets/images/return_1.png" class="icon" />
          <span style="margin-left:5px;vertical-align:5px;">购物车</span>
        </div>
        <div style="margin-right:5px;" @click="clearCarts">
          <img src="../assets/images/delete.png" class="icon" />
          <span style="margin-left:5px;vertical-align:5px;">清空</span>
        </div>
      </nav>
      <section class="cart_items">
        <div v-for="product of carts" :key="product.id" class="cart_item">
          <div class="cart_item_1">
            <div style="font-size:1.2rem;font-weight:bold">{{product.name}}</div>
            <button-group :product="product"></button-group>
          </div>
          <div class="cart_item_1">
            <div>备注</div>
            <div>
              <img src="../assets/images/more_1.png" style="width:25px;height:25px;" />
            </div>
          </div>
        </div>
      </section>
    </article>
  </div>
</template>

<script>
import ButtonGroup from "../components/ButtonGroup.vue";
export default {
  components:{
    ButtonGroup
  },
  created() {
    this.$bus.$on("addCarts", product => {
      if (!this.carts.find(item => item == product)) {
        this.carts.push(product);
      } else {
        this.carts.splice(
          this.carts.findIndex(item => item.id == product.id),
          1,
          product
        );
      }
    });
    this.$bus.$on("reduceCarts", product => {
      if (product.count == 0) {
        this.carts.splice(
          this.carts.findIndex(item => item.id == product.id),
          1
        );
        if(this.carts.length==0){
          this.clearCarts();
        }
      } else {
        this.carts.splice(
          this.carts.findIndex(item => item.id == product.id),
          1,
          product
        );
      }
    });
  },
  methods: {
    closeCarts: function() {
      this.$bus.$emit("closeCarts", false);
      this.showOverlay=false;
    },
    clearCarts: function() {
      this.carts = [];
      this.closeCarts();
      this.$bus.$emit("clearProducts");
      this.$bus.$emit("showBottom");
    }
  },
  computed: {
    total: function() {
      let sum = 0;
      this.carts.forEach(item => {
        sum += item.real * item.count;
      });
      return sum;
    }
  },
  watch: {
    carts: function(newValue) {
      if (newValue.length > 0) {
        this.$bus.$emit("showBottom", true);
      }
    },
    total: function(newValue) {
      this.$bus.$emit("setTotal", newValue);
    }
  },
  data() {
    return {
      carts: [],
    };
  }
};
</script>

<style scoped>
.cart {
  position: absolute;
  bottom: 50px;
  left: 0;
  z-index: 1;
}
.icon {
  width: 20px;
  height: 20px;
}
.cart_title {
  height: 45px;
  width: 100vw;
  background-color: #f3f5f8;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
.cart_item {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f2f4f6;
  padding: 5px;
}
.cart_item_1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}
</style>